<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用bootstrap绘制form表单</title>
    <!--bootstrap是基于jQuery的，所以需要先引入jQuery的库文件-->
    <!--bootstrap是基于Bootstrap的，所以需要先引入Bootstrap的库文件-->
    <!-- Bootstrap core CSS -->
    <link href="js/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="js/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <!-- Bootstrap core JavaScript-->
    <script src="js/jquery-1.12.4/jquery-1.12.4.js"></script>
    <script src="js/jquery-1.12.4/jquery-1.12.4.min.js"></script>
   </head>
<style>
    #maindiv{
        width: 80%;
        padding-top: 5px;
    }
</style>
<body>
<div id="maindiv">
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
            <label for="exampleInputFile">File input</label>
            <input type="file" id="exampleInputFile">
            <p class="help-block">Example block-level help text here.</p>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> Check me out
            </label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>

</div>
</body>
</html>